<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>朋友圈</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">
        <h1>前端小课</h1>
        <div class="header-user">
            <p>寄居蟹(Rensq)</p>
            <img src="./images/my.jpg" alt="">
        </div>
    </div>
    <div class="main">
        <ol>
            <li class="item">
                <a href="#" class="avatar"><img src="" alt=""></a>
                <div class="content">
                    <p>互帮互助</p>
                    <p>纪念《前端小课》第二阶段课程圆满结束，这一阶段主要搞定CSS布局。以实现一个朋友圈为实践。就是这么牛。</p>
                    <ul>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                        <li><a href="#"><img src="" alt=""></a></li>
                    </ul>
                    <div class="timestamp">
                        <p>2小时前</p>
                        <a href="#"><img src="./images/star.png" alt=""></a>
                    </div>
                    <div class="comments">
                        <p class="zan"><a href="#">蒸蒸日上</a></p>
                        <p><a href="#">小灰兔</a>：关注了</p>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href="#" class="avatar"><img src="" alt=""></a>
                <div class="content">
                    <p>后厂村高T</p>
                    <p>偶尔发现前端小课真心不错，可以从零开始学习前端。</p>
                    <div class="zhuanfa">
                        <img src="" alt="">
                        <p>第10天：买一块地盖一处院子</p>
                    </div>
                    <div class="timestamp">
                        <p>2小时前</p>
                        <a href="#"><img src="./images/star.png" alt=""></a>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href="#" class="avatar"><img src="" alt=""></a>
                <div class="content">
                    <p>前端小课</p>
                    <p>第一阶段20天学习了HTML与CSS，第二阶段学习了CSS布局，可以用它来做网站了，开心。</p>
                    <ul>
                        <li><a href="#"><img src="" alt=""></a></li>
                    </ul>
                    <div class="timestamp">
                        <p>2小时前</p>
                        <a href="#"><img src="./images/star.png" alt=""></a>
                    </div>
                    <div class="comments">
                        <p class="zan"><a href="#">小花猫</a></p>
                        <p><a href="#">大强</a>：厉害了，学好教教我做网站。</p>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href="#" class="avatar"><img src="" alt=""></a>
                <div class="content">
                    <p>Lefex</p>
                    <p>觉得不错就关注和我一起学习前端吧，用微信扫描下面的二维码。</p>
                    <ul>
                        <li><a href="#"><img src="./images/qrcode.png" alt=""></a></li>
                    </ul>
                    <div class="timestamp">
                        <p>2小时前</p>
                        <a href="#"><img src="./images/star.png" alt=""></a>
                    </div>
                    <div class="comments">
                        <p class="zan"><a href="#">蒸蒸日上</a></p>
                        <p><a href="#">大强</a>：厉害了，学好教教我做网站。</p>
                    </div>
                </div>
            </li>
        </ol>
    </div>
</body>
</html>